<template>
  <el-row class="login-container" justify="center" align="middle">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <img :src=imgUrl alt="">
        </div>
      </template>
      <div class="jump-link">
        <el-link type="primary" @click="handleChange">{{ formType ? '返回登录' : '注册账号' }}</el-link>
      </div>
      <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" placeholder="手机号" prefix-icon="UserFilled"></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input v-model="loginForm.passWord" type="password" placeholder="密码" prefix-icon="Lock"></el-input>
        </el-form-item>
        <el-form-item prop="validCode" v-if="formType">
          <el-input v-model="loginForm.validCode" placeholder="验证码" prefix-icon="Message" style="width: 320px">
            <!-- <template #append >
              <span @click="countDownChange" >{{ countDown.validText }}</span>
            </template> -->
          </el-input>
          <el-button type="primary" @click="countDownChange" style="width: 80px">{{ countDown.validText }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%" @click='submitForm(loginFormRef)'>
            {{formType? '注册账号':'登录'}}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-row>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getCode, userAuthentication, login } from '../../api';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const imgUrl = new URL('../../../public/images/login-head.png', import.meta.url).href

// 表单数据
const loginForm = reactive({
  userName: '',
  passWord: '',
  validCode: ''
})

// 切换菜单（0-登录，1-注册）
const formType = ref(0)
// 点击切换登录和注册
const handleChange = () => {
  formType.value = formType.value ? 0 : 1
}

// 账号校验规则
const validateUser = (rule, value, callback)=>{
  // 不能空
  if(value === ''){
    callback(new Error('请输入账号'))
  }else{
    const phoneReg = /^1(3[0-9]|4[01456789]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    phoneReg.test(value)? callback() : callback(new Error('手机号格式错误，请输入正确的手机号'))
  }
}
// 密码校验规则
const validatePass = (rule, value, callback)=>{
  // 不能空
  if(value === ''){
    callback(new Error('请输入密码'))
  }else{
    const passReg = /^[a-zA-Z0-9_-]{4,16}$/
    passReg.test(value)? callback() : callback(new Error('密码格式错误，需要4到16位字符，请确认格式'))
  }
}

// 表单校验
const rules = reactive({
  userName: [{validator: validateUser, trigger: 'blur'}],
  passWord: [{validator: validatePass, trigger: 'blur'}]
})

// 发送验证码
const countDown = reactive({
  validText: '获取验证码',
  time: 60,
})
let flag = ref(false)  // true-已发送  false-未发送
const countDownChange = () => {
  // 如果已发送就不处理
  if (flag.value) return
  // 判断手机号是否正确
  const phoneReg = /^1(3[0-9]|4[01456789]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
  if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {
    return ElMessage({
      message: '请检查手机号是否正确',
      type: 'error'
    })
  }
  // 倒计时
  let timerId = setInterval(() => {
    if (countDown.time <= 0) {
      countDown.time = 60
      countDown.validText = '获取验证码'
      flag.value = false
      clearInterval(timerId)
    } else {
      countDown.time -= 1
      countDown.validText = `剩余${countDown.time}s`
    }
  }, 1000)
  flag.value = true
  getCode({tel: loginForm.userName}).then(({data})=>{
    if(data.code === 10000){
      ElMessage.success('发送成功')
    }
  })
}
const router = useRouter()
// 表单提交
const loginFormRef = ref()
const submitForm = async(formEl)=>{
  if(!formEl) return
  // 手动触发校验
  await formEl.validate((valid, fields)=>{
    if(valid){
      // 注册页面
      if(formType.value){
        userAuthentication(loginForm).then(({data})=>{
          if(data.code === 10000){
            ElMessage.success('注册成功，请登录')
            console.log(data)
            formType.value = 0
          }
        })
      }else{ // 登录页面
        login(loginForm).then(({data})=>{
          if(data.code === 10000){
            ElMessage.success('登录成功')
            // 将token和用户信息缓存到浏览器
            localStorage.setItem('pz_token', data.data.token)
            localStorage.setItem('pz_userInfo', JSON.stringify(data.data.userInfo))
            // 跳转
            router.push('/')
          }
        })
      }
    }else{
      console.log('erro submit')
    }
  })
}
</script>

<style lang="less" scoped>
:deep(.el-card__header) {
  padding: 0;
}

.login-container {
  height: 100%;

  .card-header {
    background-color: #899fe1;

    img {
      width: 430px;
    }
  }

  .jump-link {
    text-align: right;
    margin-bottom: 10px;
  }
}
</style>